<template>
  <el-row class="top-header">
    <el-col :span="18">
      <div class="top-header__logo" @click="goHome">
        <img src="../assets/logo.png">
      </div>
      <div class="top-header__title">
        <span @click="goHome">{{sys.systemName}}</span>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="top-header__tools">
        <div class="tool-item">
          <div class="tool-item-info">
            <xdh-avatar :src="head">User</xdh-avatar>
            {{userInfo?userInfo.xm:''}}
          </div>
          <div class="tool-item-icon">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-setting"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="list in menusSys[0].children" :key="list.pkValue">
                  <router-link :to="{path:list.path}">{{list.name}}</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <i class="el-icon-news" @click="changesSkin"></i>
            <i class="el-icon-remove" @click="logout"></i>
          </div>
        </div>
      </div>
    </el-col>
    <xdh-dialog
      title="选择皮肤"
      :closed.sync="dialogVisible">
      <el-radio-group v-model="themeValue">
        <el-radio label="">默认</el-radio>
        <el-radio label="whiteBlue">白蓝</el-radio>
        <el-radio label="green">绿</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogCancel()">取 消</el-button>
    <el-button type="primary" @click="dialogSave()">确 定</el-button>
  </span>
    </xdh-dialog>
  </el-row>
</template>

<script>
  import XdhMenu from '../widgets/xdh-menu';
  import XdhAvatar from '../widgets/xdh-avatar';
  import XdhDialog from '../widgets/xdh-dialog';
  import XdhDialogForm from '../widgets/xdh-dialog-form';
  // import homeMixin from '../base/mixin/home-pwd';
  import {logoutAction} from '../helper/before';
  import {LOCAL, remove} from '../utils/storage'
  // import {GET_CURRENT_USER} from '../base/types';
  import {LOGIN_PATH} from '@/config';
  import {mapState} from 'vuex'

  const DEFAULT_HEAD = require('../assets/images/head.jpg');

  const removeTheme = (theme) => {
    [...document.getElementsByTagName('link')].forEach(val => {
      if (val.dataset.theme && val.dataset.theme !== theme) {
        val.parentNode.removeChild(val)
      }
    })
  }

  const createTheme = (theme) => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = `/static/css/theme-${theme}.css`;
    link.dataset.theme = theme;
    document.head.appendChild(link);
    link.onload = () => {
      removeTheme(theme)
    }
  }
  export default {
    components: {
      XdhMenu,
      XdhAvatar,
      XdhDialog,
      XdhDialogForm
    },
    props: {
      showTitle: {
        type: Boolean,
        default: true
      },
      menusSys: {
        type: Array,
        default() {
          return []
        }
      }
    },
    // mixins: [homeMixin],
    created() {
      // this.userInfo || this.$store.dispatch(GET_CURRENT_USER);
    },
    mounted() {
      this.themeValue = this.userInfo.themes || ''
    },
    computed: {
      head() {
        return DEFAULT_HEAD
        // return this.userInfo && this.userInfo.face
        //   ? (FILE_DOWNLOAD_PATH + this.userInfo.face)
        //   : DEFAULT_HEAD;
      },
      ...mapState({
        userInfo: state => state.userInfo.userInfo || {}
      }),
      sys() {
        return {
          systemName: '线索平台'
        }
        // return this.$store.state.adminProperties.propertiesState;
      }
    },
    watch: {
      themeValue(theme) {
        // 有接口先获取当前皮肤
        const {currentLink} = this.$store.state.userInfo.userInfo;
        if (theme === (currentLink && currentLink.dataset.theme)) {
          return;
        }

        if (theme) {
          createTheme(theme)
        } else {
          [...document.getElementsByTagName('link')].forEach(val => {
            if (val.dataset.theme) {
              val.parentNode.removeChild(val)
            }
          })
        }
      }
    },
    data() {
      return {
        dialogVisible: true,
        themeValue: ''
      };
    },
    methods: {
      goHome() {
        this.$router.push('/');
      },
      changesSkin() {
        this.dialogVisible = false;
      },
      dialogCancel() {
        if (this.themeValue !== this.userInfo.themes) {
          createTheme(this.userInfo.themes)
        }
        this.themeValue = this.userInfo.themes || ''
        this.dialogVisible = true;
      },
      dialogSave() {
        this.$store.dispatch('PATCH_USER_INFO', {
          data: {
            themes: this.themeValue,
            pkValue: this.userInfo.pkValue
          }
        }).then(res => {
          this.$message({
            message: '保存成功!',
            type: 'success'
          })
          this.dialogVisible = true;
        }).catch(err => {
          this.$message({
            message: err + '保存失败!',
            type: 'error'
          })
        })
      },
      logout() {
        this.$confirm('确认退出系统？')
          .then(res => {
            remove('token', LOCAL);
            logoutAction().then(() => {
              this.$message({
                type: 'success',
                message: '用户登出成功!'
              });
              this.$router.push(LOGIN_PATH);
              [...document.getElementsByTagName('link')].forEach(val => {
                if (val.dataset.theme) {
                  val.parentNode.removeChild(val)
                }
              });
            }).catch(err => {
              this.$message({
                message: err + '保存失败!',
                type: 'error'
              })
            })
          })
      }
    }
  }
</script>
<style scoped>
  .el-form-item {
    margin-bottom: 20px;
  }

  .user-info .el-form-item {
    margin-bottom: 0;
  }
</style>
